<template>
  <div>
    <div class="bottleReturn">
      <div class="title">
        投诉内容:
      </div>
      <el-checkbox-group v-if="!isExist" v-model="submit.checkList">
        <el-checkbox label="送气速度慢" />
        <el-checkbox label="服务态度差" />
        <el-checkbox label="乱收费" />
        <el-checkbox label="系统违规操作" />
        <el-checkbox label="抢修抢险不及时" />
        <el-checkbox label="其它" />
      </el-checkbox-group>
      <el-checkbox-group v-else v-model="submit.checkList">
        <el-checkbox v-for="(l,i) in checkQuery" :key="i" :label="l.keyName" />
      </el-checkbox-group>
      <el-input v-model="submit.remark" type="textarea" :rows="3" maxlength="255" show-word-limit />
      <div style="height: 40px;" />
      <div class="title">
        近三次投诉记录:
      </div>
      <lb-table
        ref="lbTable"
        highlight-current-row
        border
        max-height="400"
        element-loading-text="加载中"
        :column="tableData.column"
        :data="tableData.data"
        :pagination="false"
        :total="tableData.total"
      />
      <p style="margin-top: 5px;"> 备注: </p>
      <el-input v-model="sumitRemark" style="margin-top: 5px;" type="textarea" :rows="3" maxlength="255" show-word-limit />
    </div>
  </div>
</template>

<script>
  import { phoneOrderComplain, queryMap, phoneOrderComplainCheckList } from '@/api'
  export default {
    name: 'complaint',
    props: {
      // :open-flow="openFlow" :open-urge="openUrge" :open-back-order="openBackOrder"
      openFlow: {
        type: Function
      },
      openUrge: {
        type: Function
      },
      openBackOrder: {
        type: Function
      },
      parseTime: {
        type: Function
      }
    },
    data() {
      return {
        sumitRemark: null,
        EnumList: [],
        checkQuery: [],
        isExist: 0,
        submit: {
          checkList: []

        },
        tableData: {
          column: [
            { label: '登记时间', prop: 'createTime', width: 105,
              render: (h, { row }) => <span >{row.createTime && this.parseTime(row.createTime, '{y}-{m}-{d} {h}:{i}:{s} ')}</span>
            },
            { label: '登记人', prop: 'createUser', width: 50 },
            { label: '投诉内容', prop: 'complainContent', width: 220 },
            { label: '备注', prop: 'remark', width: 130 },
            { label: '状态', prop: 'cstatus', align: 'center', width: 80,
              render: (h, { row }) => <span >{this.EnumList.find(l => l.value === row.cstatus) ? this.EnumList.find(l => l.value === row.cstatus).desc : ''}</span>
            },
            {
              prop: 'yf',
              label: '催单',
              align: 'center',

              render: (h, { row, $index }) => row.cstatus === 4 ? <span>催单</span> : <span style='color:#126edc;cursor:pointer' onClick={() => this.openUrge({ billCode: row.complainId, billType: 4 })} >催单</span>
            },
            {
              prop: 'fee1',
              label: '退单',
              align: 'center',

              render: (h, { row, $index }) => row.cstatus === 4 ? <span>退单</span> : <span style='color:#126edc;cursor:pointer' onClick={() => this.openBackOrder(row)} >退单</span>
            },
            {
              prop: 'tip1',
              label: '流转',
              align: 'center',
              render: (h, { row, $index }) => <span style='color:#126edc;cursor:pointer' onClick={() => this.openFlow({ billCode: row.complainId, billType: 4 })} >流转</span>
            }

          ],
          data: []
        }
      }
    },
    async created() {
      this.getEnum()
      this.getCheckList()
    },
    methods: {
      async getData(csmId) {
        if (!csmId) {
          return
        }
        const params = {
          csmId: csmId,
          topCount: 3
        }
        const res = await phoneOrderComplain(params)
        this.tableData.data = res.data
      },
      async getEnum() {
        const res = await queryMap({ enumName: 'ComplainStatus' })
        this.EnumList = res.data
      },
      async getCheckList() {
        const res = await phoneOrderComplainCheckList({ enumName: 'RepairStatus' })
        this.checkQuery = JSON.parse(res.data.commonKeysInfoList)
        this.isExist = res.data.isExist
        console.log(this.checkQuery, 'res')
      }
    }
  }
</script>

<style lang="scss" scoped>
.repairs {
  height: 100%;
}
.title {
  font-size: 14px;
  color: #ed912e;
}
</style>

